<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>文档列表</title>
  <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/app.css" />
  <style>
    html,
    body,
    #app-doclist {
      height: 100%;
    }

    .page-title {
      margin-bottom: 20px;
    }

    .btn-primary {
      background-color: #1890ff;
      border-color: #1890ff;
      outline: none;
    }

    .btn-primary:focus,
    .btn-primary:hover {
      background-color: #40a9ff;
      border-color: #40a9ff;
      outline: none;
    }

    .btn-primary.active,
    .btn-primary:active {
      background-color: #096dd9;
      border-color: #096dd9;
      color: #fff;
      outline: none;
    }

    /* 浅色主题 */
    body.vscode-light {
      background: white;
      color: #2f2f2f;
    }
    body.vscode-light table {
      color: #3f3f3f;
    }
    body.vscode-light .table-hover>tbody>tr:hover>td,
    body.vscode-light .table-hover>tbody>tr>th {
      color: black;
      cursor: pointer;
    }
    .btn-outline-info {
      color: #00748c;
      border-color: #00748c;
    }
    body.vscode-light .offcanvas {
      color: #606060;
    }
    body.vscode-light .modal-content {
      color: #606060;
    }

    /* 深色主题 */
    body.vscode-dark {
      background: #252526;
      color: white;
    }
    body.vscode-dark .btn-close {
      filter: invert(1);
    }
    body.vscode-dark .form-control,body.vscode-dark .form-select {
      color: #959595;
      background-color: #040404;
    }
    body.vscode-dark table {
      color: #d1d1d1;
    }
    body.vscode-dark .offcanvas {
      color: #d4d4d4;
      background-color: #282a36;
    }
    body.vscode-dark .page-link {
      color: #a0a0a0;
      background-color: transparent;
      cursor: pointer;
    }
    body.vscode-dark .page-link:hover {
      color: #fff;
    }
    body.vscode-dark .table-hover>tbody>tr:hover>td,
    .table-hover>tbody>tr:hover>th {
      color: white;
      cursor: pointer;
    }
    body.vscode-dark .modal-content {
      color: #a8a8a8;
      background-color: #282a36;
    }
    body.vscode-dark .alert-success {
      color: #b3b3b3;
      background-color: #1c1b1b;
      border: none;
    }
    body.vscode-dark .alert-success>b {
      color: #45ab7b;
    }
    body.vscode-dark .btn-link {
      font-weight: 600;
      color: #ffad4b;
      text-decoration: underline;
    }

    /* 高对比度主题 */
    body.vscode-high-contrast {
      background: #252526;
      color: white;
    }
    body.vscode-high-contrast table {
      color: white;
    }
    body.vscode-high-contrast .table-hover>tbody>tr:hover>td,
    .table-hover>tbody>tr:hover>th {
      color: white;
      cursor: pointer;
    }
    body.vscode-high-contrast .offcanvas {
      color: #d4d4d4;
      background-color: #282a36;
    }
    body.vscode-high-contrast .modal-content {
      color: #a8a8a8;
      background-color: #282a36;
    }
  </style>
</head>

<body>
  <div id="app-doclist" class="container-fluid">
    <div v-if="reloadFlag">
      <p class="fw-bold fs-3 lh-lg">文档配置</p>
      <p class="alert alert-success">
        配置文件模式: 
        <b>{{urlsConfig.enabled ? '本地模式': '远程模式'}}</b>
        <a href="javascript:;" class="btn btn-sm btn-link" @click="updateConfig(!urlsConfig.enabled)">
          切换为{{!urlsConfig.enabled ? '本地模式': '远程模式'}}
        </a>
        <br />
        配置文件路径: 
        <b v-show="localFlag" style="cursor:pointer;" @click="openFileInVscode">
          {{urlsConfig.path}}
        </b>
        <b v-show="!localFlag" style="cursor:pointer;" @click="openUrlInBrowser(urlsConfig.urlsGitee)">
          {{urlsConfig.urlsGitee}}
        </b>
        <br />
        配置文件名称: 
        <b>
          {{urlsConfig.file}}
        </b>
        (本地模式下)
      </p>
      <!-- <p v-if="!urlsConfig.enabled" class="alert alert-danger" style="width: 65%">
        注意：您还'未启用'文档列表数据的本地配置文件，目前使用的是远程GIT网络仓库中的配置文件 <br/>
        想使用本地配置文件，vscode 设置中请设置 "tomtools.urls.enabled": true <br/>
        可执行左侧 Tom 工具栏的 '命令' > '文档配置菜单' 选项进行可视化配置 <br/>
        配置完成后重新打开此页面即可修改内容
      </p> -->
      <!-- <p class="alert alert-warning" style="width: 65%">
        说明：下方展示了您本地配置文件中的数据，可点击下方按钮在 localurls.json 中进行编辑<br />
        也可以点击新增按钮进行新增网址操作<br/>
        注意：请确保 vscode 设置中以下两项配置不为空<br />
        1. 本地配置文件路径："tomtools.urls.path"<br/>
        <i v-if="urlsConfig.urlsPath"> 目前值：{{urlsConfig.urlsPath}}</i>
        <b class="warning" v-else> !!!请配置 "tomtools.urls.path": "你的本地配置文件所在文件夹的路径"</b>
        <br />
        2. 本地配置文件名称："tomtools.urls.file"<br/>
        <i v-if="urlsConfig.urlsFile"> 目前值：{{urlsConfig.urlsFile}}</i>
        <b v-else> !!!请配置 "tomtools.urls.file":
          "你的本地配置文件名称，带json后缀的那种"</b>
      </p> -->
      <button v-show="localFlag" type="button" class="btn btn-primary" data-bs-toggle="offcanvas"
        data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling" @click="addOpen">
        新 增
      </button>
      <table class="table table-hover">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">名称</th>
            <th scope="col">父级文件夹</th>
            <th scope="col">网址/命令</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(l,i) in urlsList" :key="i">
            <th scope="row">{{l.id}}</th>
            <td>{{l.name}}</td>
            <td>{{l.type}}</td>
            <td>{{l.url}}</td>
            <td>
              <!-- <button 
              type="button" 
              class="btn btn-outline-warning" 
              data-bs-toggle="offcanvas" 
              data-bs-target="#offcanvasScrolling" 
              aria-controls="offcanvasScrolling"
              @click="updateOpen(l)"
            >修改</button> -->
              <button v-show="localFlag" type="button" class="btn btn-outline-danger" data-bs-toggle="modal"
                data-bs-target="#exampleModal" @click="setDelData(l)">
                删除
              </button>
              <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-sm">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel">
                        确认删除？
                      </h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        取消
                      </button>
                      <button type="button" class="btn btn-danger" data-bs-dismiss="modal" @click="delUrls(l)">
                        删除
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
        id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasScrollingLabel">
            {{addFlag?'新增':'修改'}}网链
          </h5>
          <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <form class="was-validated">
            <div class="mb-3">
              <label for="validationServer01" class="form-label">网链ID（大于0，不可重复，可用于排序）</label>
              <input type="text" class="form-control" required v-model="addUrls.id" />
              <div class="invalid-feedback">一定要大于0哦</div>
            </div>
            <div class="mb-3">
              <label for="validationServer01" class="form-label">名称（例如：VueJS）</label>
              <input type="text" class="form-control" required v-model="addUrls.name" />
              <div class="invalid-feedback">不能为空哦</div>
            </div>
            <div class="mb-3">
              <label for="validationServer02" class="form-label">{{urlText}}</label>
              <input type="text" class="form-control" required v-model="addUrls.url" />
              <div class="invalid-feedback">不能为空哦</div>
            </div>
            <div class="mb-3">
              <label for="validationTextarea" class="form-label">标签（例如：tools,docs）</label>
              <textarea class="form-control is-invalid" v-model="addUrls.tag" id="validationTextarea" rows="3" required>{{addUrls.tag}}</textarea>
              <div class="invalid-feedback">
                注意：要使用英文逗号 , 分割标签名称哦
              </div>
            </div>
            <div class="mb-3">
              <label for="validationServer02" class="form-label">类型（相当于父级文件夹，如果是命令请选择 Commands）</label>
              <select class="form-select" required v-model="addUrls.type">
                <option value="Documents" selected>Documents</option>
                <option value="Tools">Tools</option>
                <option value="Videos">Videos</option>
                <option value="Pictures">Pictures</option>
                <option value="Commands">Commands</option>
              </select>
              <div class="invalid-feedback">请选择至少一种类型</div>
            </div>
          </form>
          <div class="mb-3">
            <button class="btn btn-primary" @click="saveUrls">保 存</button>
          </div>
        </div>
      </div>
      <nav v-show="searchData.total > 0" aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
          <li v-show="searchData.pageNo > 1" class="page-item">
            <a class="page-link" @click="changePage(1)">第一页</a>
          </li>
          <li v-for="(p,i) in searchData.page" :key="i" class="page-item">
            <a class="page-link" @click="changePage(p)">{{p}}</a>
          </li>
          <li v-show="searchData.pageNo < searchData.page" class="page-item">
            <a class="page-link" @click="changePage(0)">下一页</a>
          </li>
        </ul>
      </nav>
      <form class="form-horizontal">
        <div class="form-group">
          <p class="control-label">
            想要操作表格，请确保已启用本地配置模式
          </p>
          <div class="col-sm-6">
            <a href="javascript:;" class="btn btn-sm btn-outline-info" @click="openFileInFinder">在文件夹中浏览</a>
            &nbsp;
            <a href="javascript:;" class="btn btn-sm btn-primary" @click="openFileInVscode">编辑配置文件</a>
            <!-- <a href="javascript:;" class="btn btn-sm btn-primary" @click="refreshTree">刷新左侧工具栏</a> -->
          </div>
        </div>
      </form>
    </div>
    <div v-else>
      <div id="loader-outer">
        <div class="loader-inner ball-beat">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
  <script src="vue/vue.js"></script> 
  <script src="jquery/jquery.min.js"></script>
  <script src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
  <script src="js/events.js"></script>
  <script src="views/doclist.js"></script>
</body>
</html>